<template>
  <div class="top-bg-banner-view-container" v-if="value && value.length > 0">
    <el-carousel
        indicator-position="none"
        arrow="never"
        :interval="4000"
        :height="carouselHeight"
    >
      <el-carousel-item v-for="(img, index) in value" :key="`top-bg-pic-${index}`">
        <div class="top-bg-pic">
          <el-image style="width: 100%;" :src="img" fit="fill" :lazy="false">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "TopBgBannerView",
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      carouselHeight: '500px',
    }
  }
}
</script>

<style scoped>
.top-bg-banner-view-container {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
